<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input
        v-model="listQuery.phone"
        placeholder="请输入手机号"
        style="width: 200px;"
        class="filter-item"
        @keyup.enter.native="handleFilter"
      />

      <el-date-picker
        v-model="listQuery.startDay"
        value-format="yyyy-MM-dd HH:mm:ss"
        type="datetime"
        placeholder="选择开始日期时间"
        style="width: 200px;"
        class="filter-item"
        clearable
        @keyup.enter.native="handleFilter"
      />
      <el-date-picker
        v-model="listQuery.endDay"
        value-format="yyyy-MM-dd HH:mm:ss"
        type="datetime"
        placeholder="选择结束日期时间"
        style="width: 200px;"
        class="filter-item"
        clearable
        @keyup.enter.native="handleFilter"
      />
      <el-button
        v-waves
        class="filter-item"
        type="primary"
        icon="el-icon-search"
        @click="handleFilter"
      >
        搜索
      </el-button>
      <!-- <el-button
        class="filter-item"
        type="primary"
        icon="el-icon-download"
        @click="handleDownload"
      >
        导出
      </el-button> -->
    </div>

    <el-table
      :key="key"
      :data="tableData"
      border
      fit
      highlight-current-row
      style="width: 100%"
    >
      <el-table-column
        label="序号"
        prop="id"
        align="center"
        width="50"
      >
        <template slot-scope="scope">
          {{ scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column
        prop="userName"
        label="司机名称"
        align="center"
        width=""
      />
      <el
      <el-table-column
        prop="userPhone"
        label="手机号"
        align="center"
        min-width="90"
      />
      <el-table-column
        prop="bankCard"
        label="银行卡号"
        align="center"
        min-width="120"
      />
      <el-table-column
        prop="openBank"
        label="所属银行"
        align="center"
        width=""
      />
      <el-table-column
        label="持有人"
        prop="openName"
        width=""
        align="center"
      />
      <el-table-column
        prop="money"
        label="金额"
        align="center"
        width=""
      />
      <el-table-column
        prop="feeMoney"
        label="手续费"
        align="center"
        width=""
      />
      <el-table-column
        prop="actual"
        label="实际到账"
        align="center"
        width=""
      />
      <el-table-column
        label="状态"
        width=""
        align="center"
      >
        <template slot-scope="scope">
          {{ scope.row.state | stateFilter }}
        </template>
      </el-table-column>

      <el-table-column
        label="创建时间"
        min-width="95"
        align="center"
      >
        <template slot-scope="scope">
          {{ scope.row.created }}
        </template>
      </el-table-column>

      <el-table-column
        label="到账时间"
        min-width="95"
        align="center"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.state==0"></span>
          <span v-else>  {{ scope.row.modified }}</span>
        </template>
      </el-table-column>
      <!-- <el-table-column
        prop="description"
        label="描述"
        width="220"
        align="center"
      /> -->
      <!-- <el-table-column
        prop="remark"
        label="备注"
        width=""
        align="center"
      /> -->
      <el-table-column
        v-if="transBtn"
        label="操作"
        align="center"
        width=""
        class-name="small-padding fixed-width"
        fixed="right"
      >
        <template slot-scope="scope">
          <el-button
            v-if="scope.row.state == 1||scope.row.state == 4"
            type="danger"
            size="mini"
            style="width:80px"
            @click="handleTrans(scope.row)"
          >手动提现
          </el-button>

        </template>
      </el-table-column>
      <!-- <el-table-column
        prop="remark"
        label="操作人"
        min-width=""
        align="center"
      /> -->

    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
      @pagination="getList"
    />

    <el-dialog
      title="手动提现"
      :visible.sync="dialogFormMoney"
      top="2vh"
      width="600px"
    >
      <el-form
        ref="temp1"
        :rules="rules"
        :model="temp1"
        label-position="left"
        label-width="100px"
        style="width: 500px; margin-left:50px;"
        class="demo-dynamic"
        :inline="true"
      >

        <el-form-item
          label="状态选择"
          prop="state"
        >
          <el-select
            v-model="temp1.state"
            class="filter-item"
            placeholder="请选择状态"
            clearable
          >
            <el-option
              v-for="item in stateOptions"
              :label="item.value"
              :value="item.id"
            />
          </el-select>
        </el-form-item>

        <el-form-item
          label="备注"
          prop="remark"
        >
          <el-input
            v-model="temp1.remark"
            clearable
          />
        </el-form-item>

      </el-form>
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="dialogFormMoney = false">
          {{ $t('table.cancel') }}
        </el-button>
        <el-button
          type="primary"
          @click="getMoney()"
        >
          {{ $t('table.confirm') }}
        </el-button>
      </div>
    </el-dialog>

  </div>
</template>
<script>
  import permission from '@/directive/permission/index.js' // 权限判断指令
  import checkPermission from '@/utils/permission' // 权限判断函数

  const defaultFormThead = ['apple', 'banana']
  import {getManyList, transferTrade} from '@/api/v1'
  import waves from '@/directive/waves' // Waves directive
  import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
  import {parseTime} from '@/utils'

  export default {
    directives: {waves, permission},
    components: {Pagination},
    filters: {
      stateFilter(role) {
        switch (role) {
          case 1:
            return '预提现'
          case 2:
            return '提现成功'
          case 3:
            return '提现失败'
          case 4:
            return '进行中'
        }
      }
    },
    data() {
      return {
        temp1: {
          id: '',
          state: '',
          remark: ''
        },
        dialogFormMoney: false,
        rules: {
          state: [{required: true, message: '请选择状态', trigger: 'change'}],
          remark: [{required: true, message: '请选择状态', trigger: 'blur'}]
        },
        stateOptions: [
          // { id: 0, value: "预提现" },
          {id: 2, value: '提现成功'},
          {id: 3, value: '提现失败'},
          {id: 4, value: '进行中'}
        ],
        transBtn: false,
        tableData: [],
        tableKey: 0,
        list: null,
        total: 0,
        listLoading: true,
        cooperation: [],
        listQuery: {
          page: 1,
          limit: 20,
          sort: '+id',
          phone: '',
          startDay: '',
          endDay: ''
        },
        key: 1, // table key
        formTheadOptions: ['apple', 'banana', 'orange'],
        checkboxVal: defaultFormThead, // checkboxVal
        formThead: defaultFormThead // 默认表头 Default header
      }
    },
    watch: {
      checkboxVal(valArr) {
        this.formThead = this.formTheadOptions.filter(
          i => valArr.indexOf(i) >= 0
        )
        this.key = this.key + 1 // 为了保证table 每次都会重渲 In order to ensure the table will be re-rendered each time
      }
    },
    created() {
      if (checkPermission(['admin'])) {
        this.transBtn = true
      } else {
        this.transBtn = false
      }

      const id = this.$route.query.id
      this.listQuery.cooperation = id
      console.log(id)
      this.getList()
    },
    methods: {
      handleTrans(row) {
        this.temp1.id = ''
        this.temp1.state = ''
        this.temp1.remark = ''

        this.temp1.id = row.id

        this.dialogFormMoney = true
        this.$nextTick(() => {
          this.$refs['temp1'].clearValidate()
        })
      },
      getMoney: function () {
        this.$refs['temp1'].validate(valid => {
          if (valid) {
            transferTrade(this.temp1).then(res => {
              console.log(res)
              this.$notify({
                title: '消息',
                message: res.msg,
                type: 'success',
                duration: 2000
              })
              this.dialogFormMoney = false
              this.getList()
            })
          }
        })
      },
      open() {
      },
      handleDownload() {
        down(this.listQuery).then(res => {
          console.log(res)
          this.$router.push({
            path: '/down'
          })
        })
      },
      getList() {
        this.listLoading = true
        getManyList(this.listQuery).then(res => {
          this.tableData = res.data.records
          this.total = Number(res.data.total)
          console.log(this.tableData)
          // Just to simulate the time of the request
          setTimeout(() => {
            this.listLoading = false
          }, 1.5 * 1000)
        })
      },
      getCooperationAll() {
        cooperationAll().then(res => {
          this.cooperation = res.data

          // Just to simulate the time of the request
          setTimeout(() => {
            this.listLoading = false
          }, 1.5 * 1000)
        })
      },
      handleFilter() {
        this.listQuery.page = 1
        this.getList()
      }
    }
  }
</script>

